import React, { Component } from 'react'
import '../App.css'
import { Icon } from 'react-vant';
import doctor from '../img/1.png'
import huiyuan from '../img/2.png'
import doctors from '../img/01.png'
import shebei from '../img/02.png'
import plan from '../img/03.png'
import ceping from '../img/04.png'
import yima from '../img/05.png'
import shoucang from '../img/06.png'
import kefu from '../img/07.png'
import tuijian from '../img/08.png'
import guanyu from '../img/09.png'
import { Carousel } from 'antd';
import { Swipe } from 'react-vant';


export default class My extends Component {

    state = {
        name: localStorage.getItem('username') || "登录或注册",
        img: localStorage.getItem('img') || doctor,
        isShow: false,
        token: localStorage.getItem('token')
    }

    componentDidMount() {
        if (this.state.token) {
            this.setState({
                isShow: (this.state.isShow = true),
            });
        }
    }

    //跳转到登录
    tologin() {
        this.props.history.push('/login')
    }

    toexit() {
        this.props.history.push('/exit')
    }

    newdangan() {
        this.props.history.push('/adddangan')
    }

    render() {
        const { name, img } = this.state;

        const contentStyle = {
            textAlign: "center",
        };
        return (
            <div className='wrap'>
                <header>
                    <div className='right'>
                        <div>
                            <Icon name="setting-o" size="20" color="#666" onClick={() => { this.toexit() }} />
                        </div>
                        <div>
                            <Icon name="chat-o" size="20" color='#666' />
                        </div>
                    </div>
                </header>
                <main>
                    <dl>
                        <dt><img src={img} /></dt>
                        <dd>
                            <h3 onClick={() => { this.tologin() }}>{name}</h3>
                            <p>账户管理</p>
                        </dd>
                    </dl>
                    <div className="one">
                        <img src={huiyuan} alt="" />
                    </div>
                    <div className="two">
                        <div className="t">
                            <p>1000.00</p>
                            <p>账户余额(元)</p>
                        </div>
                        <div className="w">
                            <p>3</p>
                            <p>优惠券(张)</p>
                        </div>
                        <div className="o">
                            <p>100</p>
                            <p>金币</p>
                        </div>
                    </div>
                    {this.state.isShow === true ? (
                        <div className="box">
                            <div className="dingdan">
                                <h3>我的订单</h3>
                                <div className="dd">

                                </div>
                            </div>
                            <div className="dangan">
                                <h3>健康档案</h3>
                                <div className='da'>
                                    <div className="ad">
                                        {/*  onClick={() => { this.newdangan() }} */}
                                        <span>新建文档</span>
                                        <p>请添加健康档案，进行档案管理</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    ) : (
                            ""
                        )}
                    <div className="three">
                        <h3>工具与服务</h3>
                        <div className="menu">
                            <a href="/doctor">
                                <dl>
                                    <dt><img src={doctors} alt="" /></dt>
                                    <dd>我是医生</dd>
                                </dl>
                            </a>
                            <a href="">
                                <dl>
                                    <dt><img src={shebei} alt="" /></dt>
                                    <dd>我的设备</dd>
                                </dl>
                            </a>
                            <a href="">
                                <dl>
                                    <dt><img src={plan} alt="" /></dt>
                                    <dd>健康计划</dd>
                                </dl>
                            </a>
                            <a href="">
                                <dl>
                                    <dt><img src={ceping} alt="" /></dt>
                                    <dd>健康测评</dd>
                                </dl>
                            </a>
                            <a href="">
                                <dl>
                                    <dt><img src={yima} alt="" /></dt>
                                    <dd>姨妈助手</dd>
                                </dl>
                            </a>
                            <a href="">
                                <dl>
                                    <dt><img src={shoucang} alt="" /></dt>
                                    <dd>我的收藏</dd>
                                </dl>
                            </a>
                            <a href="">
                                <dl>
                                    <dt><img src={kefu} alt="" /></dt>
                                    <dd>美洽客服</dd>
                                </dl>
                            </a>
                            <a href="">
                                <dl>
                                    <dt><img src={tuijian} alt="" /></dt>
                                    <dd>有奖推荐</dd>
                                </dl>
                            </a>
                            <a href="">
                                <dl>
                                    <dt><img src={guanyu} alt="" /></dt>
                                    <dd>关于美洽医生</dd>
                                </dl>
                            </a>
                        </div>
                    </div>
                </main>
            </div>
        )
    }
}


